<!doctype html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">

    <title>中国软件杯</title>

    <!--设置是否为缩放模式 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}">


    <!-- 轮播swiper文件 -->

    <link rel="stylesheet" type="text/css" th:href="@{/css/swiper.min.css}">


    <link rel="stylesheet" type="text/css" th:href="@{/css/visual.css}">

<style>
    .span1{
        color: #fff;
        position: absolute;
        top: 10.7%;
       left: 8%;
       font-size:7px;
    }
    .span2{
        color: #fff;
        position: absolute;
        top: 78%;
        left: 8%;
        font-size:7px;
    }
</style>
</head>

<body class="ksh">
<header class="header1">
    <h1></h1>
</header>
<div id="load">

    <div class="load_img"><!-- 加载动画 -->
        <img class="jzxz1" th:src="@{/images/jzxz1.png}">

        <img class="jzxz2" th:src="@{/images/jzxz2.png}">
    </div>
</div>


<div class="visual">

    <div class="visual_left">

        <div class="visual_box">

            <div class="visual_title">

                <span>航班与旅客量</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="visual_chart" id="main1">


            </div>

        </div>

        <div class="visual_box">

            <div class="visual_title">

                <span>航班航线分析图</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="visual_chart" id="main2">


            </div>

        </div>

        <div class="visual_box">

            <div class="visual_title">

                <span>排名前三的热门城市</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="visual_chart sfzcll">

                <a>热门城市</a>

                <a>常旅客量</a>

                <a>团队旅客量</a>

                <div class="sfzcll_pos_box">

                    <div class="sfzcll_box">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">


                        <label id="city1"></label>

                        <div class="sfzcll_smallBk">

                            <div class="ygl">

                                <span id="passengers1"></span>人

                            </div>

                        </div>

                        <div class="sfzcll_smallBk">

                            <div class="ygh">
                                <span id="income">256</span>人

                            </div>

                        </div>

                        <div class="clear"></div>

                    </div>

                    <div class="sfzcll_box">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <label id="city2">长沙</label>

                        <div class="sfzcll_smallBk">

                            <div class="ygl">

                                <span id="passengers2">4</span>人

                            </div>

                        </div>

                        <div class="sfzcll_smallBk">

                            <div class="ygh">

                                <span id="income1"></span>人

                            </div>

                        </div>

                        <div class="clear"></div>

                    </div>

                    <div class="sfzcll_box">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <img class="sfzcll_bkJk" th:src="@{/images/ksh34.png}">

                        <label id="city3">武汉</label>

                        <div class="sfzcll_smallBk">

                            <div class="ygl">

                                <span id="passengers3">2万</span>人

                            </div>

                        </div>

                        <div class="sfzcll_smallBk">

                            <div class="ygh">

                                <span id="income2">10</span>人

                            </div>

                        </div>

                        <div class="clear"></div>

                    </div>

                </div>


            </div>

        </div>

    </div>

    <div class="visual_con">

        <div class="visual_conTop">

            <div class="visual_conTop_box visual_conTop1">

                <div>

                    <h3>日航班数量</h3>

                    <p id="number" style="margin-left: 25px">7</p>

                    <div class="conTop_smil">

                    </div>

                </div>

            </div>

            <div class="visual_conTop_box visual_conTop1">

                <div>

                    <h3>周航班数量</h3>

                    <p id="number1" style="margin-left: 25px"></p>

                    <div class="conTop_smil">



                    </div>

                </div>

            </div>

            <div class="visual_conTop_box visual_conTop2">

                <div>

                    <h3>月航班数量</h3>

                    <p id="number2" style="margin-left: 35px">200</p>

                    <div class="conTop_smil">

                    </div>


                </div>

            </div>
            <div class="visual_conTop_box visual_conTop2">

                <div>

                    <h3>总航班数量</h3>

                    <p id="number3" style="margin-left: 30px">200000</p>

                    <div class="conTop_smil">

                    </div>


                </div>

            </div>
        </div>

            <div class="clear"></div>


        <div class="visual_conBot">


            <img class="visual_conBot_l" th:src="@{/images/ksh42.png}">

            <img class="visual_conBot_2" th:src="@{/images/ksh43.png}">

            <img class="visual_conBot_3" th:src="@{/images/ksh44.png}">

            <img class="visual_conBot_4" th:src="@{/images/ksh45.png}">

            <div class="visual_chart_text">
                航线往返图
            </div>
            <div class="visual_chart" id="main8"></div>
            <div class="visual_conBot_bot">
                <div class="visualSssf_left">
                    <h3>点击查看每个城市航班市</h3>
                    <a style="display:block">全国数据</a>
                    <a>AEC</a>
                    <a>CAD</a>
                    <a>GDF</a>
                    <a>AFA</a>
                    <a>GFG</a>
                    <a>DEF</a>
                    <a class="active">AEC</a>
                    <a>CDE</a>
                    <a>ACF</a>
                    <div class="div1">
                        <a>AEC</a>

                        <a>CAD</a>

                        <a>GDF</a>

                        <a>AFA</a>

                        <a>GFG</a>

                        <a>DEF</a>

                        <a>AEC</a>

                        <a>CDE</a>

                        <a>ACF</a>
                    </div>
                    <div class="div2">
                        <a>AEC</a>

                        <a>CAD</a>

                        <a>GDF</a>

                        <a>AFA</a>

                        <a>GFG</a>

                        <a>DEF</a>

                        <a>AEC</a>

                        <a>CDE</a>

                        <a>. . . .</a>
                    </div>
                </div>
                <div class="visualSssf_right">


                    <div class="" id="main5"></div>

                    <div class="" id="main6"></div>

                    <div class="" id="main7"></div>

                </div>

                <div class="clear"></div>

            </div>

        </div>


    </div>

    <div class="visual_right">

        <div class="visual_box">

            <div class="visual_title">

                <span>航班统计</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="swiper-container visual_swiper1 visual_chart">

                <div class="swiper-wrapper">

                    <div class="swiper-slide" id="main3" style="margin-left: 13px"></div>

                    <div class="swiper-slide" id="main31"></div>

                </div>

            </div>

        </div>

        <div class="visual_box visualSfzsfl">

            <div class="visual_title">

                <span>热点分布图</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="visual_chart" id="main9">


            </div>

            <div class="visual_table">

                <table>


                </table>

            </div>

        </div>

        <div class="visual_box">

            <div class="visual_title">

                <span>每个月的客座率</span>

                <img th:src="@{/images/ksh33.png}">

            </div>

            <div class="swiper-container visual_swiper2 visual_chart">

                <div class="swiper-wrapper">
                    <span class="span1">五月</span>
                    <span class="span2">十月</span>
                    <div class="swiper-slide" id="main4" style="margin-left: -20px;margin-bottom: 60px"></div>

                    <div class="swiper-slide" id="main41"></div>

                </div>

            </div>

        </div>

    </div>

    <div class="clear"></div>

</div>


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script th:src="@{/js/jquery.min.js}"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script th:src="@{/js/bootstrap.min.js}"></script>

<!--echarts JS-->

<script th:src="@{/js/echarts.min.js}"></script>

<script th:src="@{/js/swiper.min.js}"></script>

<!--界面样式-->

<script th:src="@{/js/chartMap.js}"></script>

<script th:src="@{/js/visual.js}"></script>
<script th:src="@{/js/china.js}"></script>

<script type="text/javascript"  th:inline="none">
    $(function () {
        var a = $('.visualSssf_left a')
        for (var i = 0; i < a.length; i++) {
            a[i].index = i;
            a[i].onclick = function () {
                for (var i = 0; i < a.length; i++) {
                    a[i].className = ''
                }
                this.className = 'active'
            }
        }
        var sfzcllH = $('.sfzcll_box').height()

        var sfzcllHtwo = sfzcllH - 2

        $('.sfzcll_box').css('line-height', sfzcllH + 'px')

        $('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')
        //删除加载动画

        $('#load').fadeOut(1000)

        setTimeout(function () {
                $('#load').remove()
            }
            , 1000);
    })
        //月航班和旅客量
    $(function () {
    $.ajax({
        url:"http://localhost:8080/airport/getEryi",    //请求的url地址
        dataType:"json",//返回格式为json
        async:false,//请求是否异步，默认为异步，这也是ajax重要特性
        type:"GET",   //请求方式
        success:function(req){
            let objArr = []
            req.data.eryi.forEach(function(element) {
                // console.log(Object.values(element))
                objArr.push(Object.values(element))
                // objArr = Object.values(element)
            });

            var myChart1 = echarts.init(document.getElementById('main1'));
            option1.series[0].data=objArr[1]
            option1.series[1].data=objArr[0]
            myChart1.setOption(option1);
        },
        error:function(){
            //请求出错处理
        }
    });

})
        //航班月分析图
    $(function () {

        $.ajax({
            url:"http://localhost:8080/airport/get",    //请求的url地址
            dataType:"json",//返回格式为json
            async:false,//请求是否异步，默认为异步，这也是ajax重要特性
            type:"GET",   //请求方式
            success:function(req){
                //遍历出数组的value
                let objArr = []
                req.data.list.forEach(function(element) {
                    objArr.push(Object.values(element))
                });
                //
                var myChart2 = echarts.init(document.getElementById('main2'));
                var myChart3 = echarts.init(document.getElementById('main3'));
                //航班图赋值
                option501.series[0].data=objArr[0]
                option501.series[1].data=objArr[1]
                //给航班分析图赋值
                option2.series[0].data=objArr[2]
                option2.series[1].data=objArr[1]
                option2.series[2].data=objArr[3]
                //第二个图
                myChart2.setOption(option2);
                //折线图
                myChart3.setOption(option501);
                var myChart9 = echarts.init(document.getElementById('main9'));
                //小地图
                myChart9.setOption(option9);
                //大地图
                var myChart8 = echarts.init(document.getElementById('main8'));

                myChart8.setOption(option8);
            },
            error:function(){
                //请求出错处理
            }
        });

    })
    //热门城市前三数据
    $(function () {
        $.ajax({
            url:"http://localhost:8080/airport/getTopCities",    //请求的url地址
            dataType:"json",//返回格式为json
            async:false,//请求是否异步，默认为异步，这也是ajax重要特性
            type:"GET",   //请求方式
            success:function(req){
                console.log(req.data.topCities[0].前十热门城市)
                //前三城市
               let jie=req.data.topCities[0].前十热门城市;
                let jie1=req.data.topCities[1].前十热门城市;
                let jie2=req.data.topCities[2].前十热门城市;
                $('#city1').html(jie)
                $('#city2').html(jie1)
                $('#city3').html(jie2)
                //旅客量
                let lu =req.data.topCities[0].常旅客量;
                let lu1 =req.data.topCities[1].常旅客量;
                let lu2 =req.data.topCities[2].常旅客量;
                $('#passengers1').html(lu)
                $('#passengers2').html(lu1)
                $('#passengers3').html(lu2)
                //分担收费
                var charge =req.data.topCities[0].团队旅客量;
                let charge1 =req.data.topCities[1].团队旅客量;
                var charge2 =req.data.topCities[2].团队旅客量;
                console.log(charge2)
                $('#income').html(charge)
                $('#income1').html(charge1)
                $('#income2').html(charge2)


            },
            error:function(){
                //请求出错处理
            }
        });
    })
    //航班数量
    $(function () {
        $.ajax({
            url:"http://localhost:8080/airport/getFlightData",    //请求的url地址
            dataType:"json",//返回格式为json
            async:false,//请求是否异步，默认为异步，这也是ajax重要特性
            type:"GET",   //请求方式
            success:function(req){
                let number=req.data.flightData[0].天航班量
                let number1 =req.data.flightData[1].周航班数
                let number2 =req.data.flightData[2].月航班量
                let number3 =req.data.flightData[3].航班总量
                $('#number').html(number)
                $('#number1').html(number1)
                $('#number2').html(number2)
                $('#number3').html(number3)


            },
            error:function(){
                //请求出错处理
            }
        });
    })
    //最后一个图的页面渲染
    $(function () {
        $.ajax({
            url:"http://localhost:8080/airport/passengerfive",    //请求的url地址
            dataType:"json",//返回格式为json
            async:false,//请求是否异步，默认为异步，这也是ajax重要特性
            type:"GET",   //请求方式
            success:function(req){
                var myChart4= echarts.init(document.getElementById("main4"));
                console.log(option50.series[0].data)
                option50.series[0].data[0]=req.data.passengerfive[0].五月客座率
                option50.series[0].data[1]=req.data.passengerfive[1].六月客座率
                option50.series[0].data[2]=req.data.passengerfive[2].七月客座率
                option50.series[0].data[3]=req.data.passengerfive[3].八月客座率
                option50.series[0].data[4]=req.data.passengerfive[4].九月客座率
                option50.series[0].data[5]=req.data.passengerfive[5].十月客座率
                myChart4.setOption(option50)
            },
            error:function(){
                //请求出错处理
            }
        });
    })



    //收费站收费排行



    var myChart5 = echarts.init(document.getElementById('main5'));

    myChart5.setOption();

    var myChart6 = echarts.init(document.getElementById('main6'));

    myChart6.setOption();

    var myChart7 = echarts.init(document.getElementById('main7'));

    myChart7.setOption();


    //中间地图
    var myChart8 = echarts.init(document.getElementById('main8'));

    myChart8.setOption(option8);


    //收费站收费量

</script>


</body>

</html>

